<template>
  <div class="safety">
    <div class="header-warpper">
      <img src="../../assets/l_jt.png" alt @click="$router.back(-1)" />
      <span @click="$router.back(-1)">支付账户</span>
      <router-link class="add" to="/add_pay">添加</router-link>
    </div>
    <div class="payment-wrap">
      <ul v-for="(item, index) in itemss" :key="index">
        <li class="payment-item">
          <dl>
            <dt class="title">
              <span class="f-flex">
                <img class="img1" src="../../assets/mm01.png" v-if="item.types == 1" alt />
                <img class="img2" src="../../assets/mm02.png" v-if="item.types == 2" alt />
                <img class="img2" src="../../assets/mm03.png" v-if="item.types == 3" alt />
                <span class="fl space15">{{item.bank_name}}</span>
              </span>
              <div class="f-flex">
                <img class="img2" src="../../assets/mr.png" v-if="item.displays == 1" alt />
                <!-- <img class="img2" src="../../assets/mr.png" v-else="item.displays == 0" alt> -->
                <span class="font-dark-30 space15" @click="def(item.id)">当前默认</span>
              </div>
            </dt>
            <dd class="name">{{item.realname}}</dd>
            <dd class="bottom">
              <span class="payment-account" v-if="item.types==1">{{item.bank_number}}</span>
              <span class="payment-del" @click="del(item.id)">删除</span>
            </dd>
          </dl>
        </li>
      </ul>
    </div>
    <div style="height:1.333333rem"></div>
    <Tabbar :idx="5" />
  </div>
</template>

<script>
// @ is an alias to /src
import Tabbar from "@/views/public/Tabbar.vue";

export default {
  name: "Pay_list",
  components: {
    Tabbar
  },
  data() {
    return {
      itemss: []
    };
  },
  created: function() {
    this.getDate();
  },
  mounted() {},
  methods: {
    getDate() {
      // var page = 1;
      // var limit = 10;
      this.$axios.post("/index/usercenter/accountslist", {}).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          if (res.data.info.length > 0) {
            this.itemss = res.data.info;
          } else {
            // console.log(1)
            alert("暂无记录");
          }
        } else {
          alert(res.data.message);
        }
      });
    },
    del(e) {
      this.$axios.post("/index/usercenter/delaccount", { id: e }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          alert(res.data.msg);
          location.reload();
        } else {
          alert(res.data.msg);
        }
      });
    },
    def(e) {
      let that = this;
      this.$axios.post("/index/usercenter/setdisplay", { id: e }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          alert(res.data.msg);
          location.reload();
        }
      });
    }

    //   isShow第一个,!isShow第二个
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.red_btn {
  width: 92%;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.safety {
  .header-warpper {
    .add {
      position: absolute;
      right: 0.4rem;
      color: #aab2ca;
      font-size: 0.4rem;
    }
  }
  .payment-wrap {
    font-size: 0.4rem;
    color: #10131e;
    .payment-item {
      padding: 0.533333rem 0.4rem;
      border-bottom: 0.133333rem solid #e7e8ee;
      .title {
        .f-flex();
        justify-content: space-between;
        .img1 {
          width: 0.586667rem;
          height: 0.586667rem;
          margin-right: 0.2rem;
        }
        .img2 {
          width: 0.533333rem;
          height: 0.533333rem;
          margin-right: 0.2rem;
        }
      }
      .name {
        margin-top: 0.666667rem;
        margin-bottom: 0.32rem;
        color: #aab2ca;
        text-align: left;
      }
      .payment-account {
        font-size: 0.48rem;
      }
      .payment-del {
        color: #4562cd;
      }
      .bottom {
        .f-flex();
        justify-content: space-between;
      }
    }
  }
}
</style>

